<template>
	<view>
		<view class="site flex-align">
			<image class="cancel-btn" src="../../../static/cancel-btn.png" mode=""></image>
			<u--text class="siteutext" text="重庆" color="#2C2C2C" size="36rpx"></u--text>
		</view>
		<view class="select-site flex">
			<view class="tradeArea">
				<u--text class="tradeAreaText" text="商圈" color="#1872FF" size="28rpx" lineHeight="40rpx"></u--text>
			</view>
			<view class="district">
				<u--text class="tradeAreaText" text="重庆" color="#1872FF" size="28rpx" lineHeight="40rpx"
					margin="0rpx 0rpx 22rpx 0rpx"></u--text>
				<view class="districtItem" v-for="(item,index) in district" :key="index">
					{{item}}
				</view>
			</view>
			<view class="allSite">
				<u--text text="全重庆" color="#1872FF" size="28rpx" lineHeight="40rpx"></u--text>
			</view>
		</view>
		<view class="cleanUp flex-align">
			<u-button text="清除"></u-button>
			<u-button type="primary" text="确定"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				district: ['巴南区', '北碚区', '长寿区', '城口区', '大渡口区', '大足区', '垫江县', '丰都县', '奉节县', '涪陵区', '合川区', '江北区', '江津区',
					'九龙坡区', '开州区', '梁平区'
				]
			}
		},
		methods: {

		}
	}
</script>

<style>
	.site {
		padding: 30rpx 60rpx 26rpx 44rpx;
		background-color: #ffffff;
	}

	.siteutext {
		flex-direction: column;
	}

	.cancel-btn {
		width: 32rpx;
		height: 32rpx;
	}

	.cleanUp {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
		padding: 26rpx 0rpx 20rpx 0rpx;
		column-gap: 38rpx;
		box-shadow: 0rpx -8rpx 16rpx 0rpx rgba(208, 208, 208, 0.3);
	}

	.cleanUp .u-button:after {
		content: none;
	}

	.cleanUp .u-button:nth-child(1) {
		margin-left: 22rpx;
		width: 240rpx;
		height: 92rpx;
		background-color: #D8D8D8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		color: #6D6D6D;
	}

	.cleanUp .u-button:nth-child(2) {
		margin-right: 20rpx;
		width: 420rpx;
		height: 92rpx;
		background: #429CFD;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	::v-deep .cleanUp .u-button span {
		font-size: 32rpx;
	}

	.tradeArea {
		width: 168rpx;
		padding: 32rpx 0rpx;
	}

	::v-deep .tradeArea .tradeAreaText:before {
		content: '';
		width: 6rpx;
		height: 40rpx;
		background: #1872FF;
		margin-right: 24rpx;
	}

	.district,
	.allSite {
		height: 100vh;
		background-color: #ffffff;
	}

	.district {
		width: 180rpx;
		padding: 32rpx 6rpx 32rpx 64rpx;
		border-right: 1px solid #F5F5F5;
	}

	.allSite {
		flex: 1;
		padding: 32rpx 0rpx 32rpx 64rpx;
	}

	.districtItem {
		font-size: 28rpx;
		color: #2C2C2C;
		text-align: left;
		padding: 22rpx 0rpx;
	}
</style>